<!-- 导航栏组件 -->
<template>
  <div class="shell">
    <!-- 顶部栏菜单 -->

    <!-- 页面跳转按钮，对应每个子页面 -->
    <div class="t-nav">
      <div class="logout-btn" @click="handleLogout">注销</div>
      <div class="menu">
        <div class="m-bnt">
          <!-- logo和名称以及天气状况 -->
          <div class="logo">
            <img src="@/assets/CodeRealm.png" />
            <span>AgriHub</span>
          </div>
          <!-- 地区、天气、温度，并且使用了element-plus的弹出框在鼠标移到上面显示更多信息 -->
          <el-popover placement="top-start" trigger="hover">
            <template #reference>
              <span>{{ mainStore.weather.location?.city }}</span>
            </template>
            <template #default>
              <div>{{ place || '' }}</div>
            </template>
          </el-popover>
          <el-popover placement="top-start" trigger="hover">
            <template #reference>
              <span>{{ mainStore.weather.now?.text }}</span>
            </template>
            <template #default>
              <div>风况: {{ mainStore.weather.now?.wind_class }}{{ mainStore.weather.now?.wind_dir }}</div>
              <div>白天: {{ mainStore.weather.forecasts[0]?.text_day }}</div>
              <div>夜晚: {{ mainStore.weather.forecasts[0]?.text_night }}</div>
            </template>
          </el-popover>
          <el-popover placement="top-start" trigger="hover">
            <template #reference>
              <span>温度: {{ mainStore.weather.now?.temp }}°C</span>
            </template>
            <template #default>
              <div>体感温度: {{ mainStore.weather.now?.feels_like }}°C</div>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="nav">
        <span :class="{ navAct: mainStore.curView == 1 }" class="tran-ani" @click="choseNav(1)">产品集市</span>
      </div>
      <div class="nav">
        <span :class="{ navAct: mainStore.curView == 2 }" class="tran-ani" @click="choseNav(2)">政府收售</span>
      </div>
      <div class="nav">
        <span :class="{ navAct: mainStore.curView == 3 }" class="tran-ani" @click="choseNav(3)">咨询室</span>
      </div>
      <div class="nav">
        <span :class="{ navAct: mainStore.curView == 4 }" class="tran-ani" @click="choseNav(4)">个人数据</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMainStore } from '@/stores'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()
const mainStore = useMainStore()

const ifMax = ref(false)
const pathArr = ['shop', 'library', 'chat', 'user']

const place = computed(() => {
  const obj = mainStore.weather.location || {}
  return `${obj.country || ''}${obj.province || ''}${obj.city || ''}`
})

// 写在外面相当于在created时调用
syncNavWithRoute()
// 在组件挂载时根据当前路由设置正确的导航高亮
onMounted(() => {
  // syncNavWithRoute()
})

// 同步导航状态与当前路由
function syncNavWithRoute() {
  // 先尝试从sessionStorage中获取保存的导航状态
  const savedView = sessionStorage.getItem('navView')
  mainStore.changeView(parseInt(savedView))
}

// 添加路由监听，当路由变化时同步导航状态
watch(() => route.path, (newPath) => {
  // 当路由路径变化时，同步导航状态
  syncNavWithRoute()
}, { immediate: true })

function choseNav(flag) {
  mainStore.currentPage = 1
  router.push(`/home/${pathArr[flag - 1]}`)
  // 更新当前视图状态，使导航按钮样式正确显示
  mainStore.changeView(flag)
  // 将当前导航状态保存到sessionStorage
  sessionStorage.setItem('navView', flag)
  // home子页面跳转
}

function routerTo(tag) {
  router.go(tag)
}

// 处理注销按钮点击事件
function handleLogout() {
  ElMessageBox.confirm(
    '确定要注销登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customStyle: { marginTop: '-300px' }
    }
  ).then(() => {
    // 清除token
    localStorage.removeItem('token')
    // 跳转到登录页面
    router.push('/login')
  }).catch(() => {
    // 用户取消操作，不做任何处理
  })
}
</script>

<style lang="less" scoped>
.shell {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navAct {
  color: #4ddc3a !important;
  border-bottom: 3px solid rgba(0, 255, 0, 1);
}

.tran-ani {
  transition: all 0.1s ease 0.1s;
}

.ic {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  color: #67707b;
  cursor: pointer;

  &:hover {
    color: #dcdedf;
  }
}

// 菜单样式控制
.menu {
  display: flex;
  text-align: right;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  width: 72%;
  margin: 0 auto;

  .m-bnt {
    margin-left: 16px;
    display: flex;
    align-items: center;

    span {
      font-size: 16px;
      margin: 2px 8px 0px 6px;
      transition: all 0.1s ease 0.1s;
      color: #cccccc;
      cursor: pointer;

      &:hover {
        color: #999;
      }
    }

    .logo {
      display: flex;
      align-items: center;

      span {
        color: #4ddc3a;
        font-size: 20px;
        font-weight: bold;
      }

      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
    }
  }
}



// 按钮样式控制
.t-nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  width: 1200px;
  margin: 0 auto;
  padding: 12px 0px;

  /* 注销按钮样式 */
  .logout-btn {
    width: 70px;
    // height: 32px;
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-left: auto;
    padding: 0px 6px;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ddd;
    line-height: 32px;
    transition: all 0.3s;
    position: fixed;
    right: 12px;
    top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;

    &:hover {
      background-color: #e43a3a;
      color: white;
      border-color: #e43a3a;
    }
  }

  .nav {
    padding: 0px 10px 10px 10px;
    background-color: #fff;
    color: #666;
    font-size: 18px;
    height: 28px;
    line-height: 28px;
    white-space: nowrap;
    cursor: pointer;

    span {
      padding-bottom: 2px;

      &:hover {
        color: #4ddc3a;
      }
    }

    &:hover .navs {
      display: block;
    }
  }
}
</style>